<template>
	<!-- 谱书内容 -->
	<view class="book_edit">
		<view v-show="book_list.length" class="edit_card" v-for="(item,index) in book_list" :key="index">
			<view class="card_title">
				<image class="book_img" :src="photo_cdn + 'zpupload/static/zupu/canto.png'"></image>
				<view class="title_text">谱文</view>
			</view>
			
			<!-- <unidatapicker v-model="article_id" :localdata="list" popup-title="请选择谱文" @change="dechange"
				@nodeclick="onnodeclick">
				<view class="card_main" @tap="amend(item,index)">
					<view class="main_title">{{item.text}}</view>
					<image class="mian_img" src="/s1tatic/user/jiantoua.png"></image>
				</view>
			</unidatapicker> -->
			
			<view class="main_del">
				<view class="main_row" @tap="toDelete(item,index)">
					<image class="main_img" :src="photo_cdn + 'zpupload/static/zupu/delete.png'"></image>
					<view class="del_title">删除</view>
				</view>
			</view>
		</view>
		
		<empty v-if="!book_list.length"></empty>
		
		<view class="preserve">
			<!-- <unidatapicker v-model="article_id" :localdata="list" popup-title="请选择谱文" @change="onchange"
				@nodeclick="onnodeclick">
				<view class="article" @tap="toAdd()">
					<image class="article_img" src="/s1tatic/zupu/addcle.png"></image>
					<view class="add_art">添加谱文</view>
				</view>
			</unidatapicker> -->
			<view class="art_btn" @tap="toSave">保存</view>
		</view>
	</view>
</template>

<script>
	import {
		getArticleList
	} from "@/utils/api/zupu.js"
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn} = config.baseUrl;
	// import unidatapicker from "@/components/uni-data-picker/uni-data-picker.vue"
	export default {
		components: {
			// unidatapicker,
		},
		data() {
			return {
				photo_cdn,
				family_id: 0,
				page: 0,
				list: [],
				change_index:"",
				book_list:[],
				article_id: '', //谱文id
			}
		},
		onLoad(option) {
			this.family_id = option.family_id ? option.family_id : 0
		},
		methods: {
			toAdd() {
				this.getArticleListfun();	
			},
			getArticleListfun() {
				this.page++
				getArticleList({
					page: this.page,
					family_id: this.family_id
				}).then(res => {
					if (res.code == 1) {
						const newData = res.data.list.map((item) => {
							return {
								//通过map遍历修改键名
								text: item['title'],
								value: item['id'],
								//修改子元素键名，此处注意map无法处理null，在子元素为null要传个空数组
								children: (item.article_list || []).map((item2) => {
									return {
										text: item2['title'],
										value: item2['id']
									}
								})
							}
						})
						this.list = newData
					}
				})
			},
			onchange(e) {
				console.info(e,"e");
				const value = e.detail.value;
				if (value.length) {
					this.article_id = String(value[value.length - 1].value);
					this.book_list.push(value[value.length - 1])
				}
				
			},
			onnodeclick(node) {
				console.info("onnodeclick", node);
			},
			//删除
			toDelete(item,index){
				this.book_list.splice(index,1);
			},
			//修改
			amend(item,index){
				this.change_index = index;
			},
			dechange(e) {
				const value = e.detail.value;
				if (value.length) {
					this.article_id = String(value[value.length - 1].value);
					this.book_list[this.change_index] = value[value.length - 1];
				}	
			},
			toSave(){
				uni.setStorageSync("book_list",this.book_list);
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	@import "./book_edit.scss"
</style>